<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0px;padding:0px;list-style: none;}
        #wrapper{width:960px;height: 320px;margin:120px auto;overflow: hidden;position: relative;} /*实际的内容可视区域*/
        ul{  /*所有的li的总宽*/
            width: 4800px;
            height: 320px;
            position: absolute;
        }
        ul li{float: left;}
        p{
            position: absolute;
            width: 100%;
            height: 40px;
            bottom: 20px;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 40px;
            height: 40px;
            background: yellowgreen;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            margin-right:20px;
        }
        span.active{
            background: crimson;
            color:#ffffff;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <ul>
            <!-- <li><img src="image/1.jpg"/></li>
            <li><img src="image/2.jpg"/></li>
            <li><img src="image/3.jpg"/></li>
            <li><img src="image/4.jpg"/></li> -->
        </ul>
        <p>
            <!-- <span class="active">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span> -->
        </p>
    </div>
    <script src="common/Style.js"></script>
    <script src="common/move.js"></script>
    <script>
        //5、由于数据后期都是通过数据库或者某一种数据接口来对接，所以需要创建模拟数据
        var arr = [
            "image/1.jpg",
            "image/2.jpg",
            "image/3.jpg",
            "image/4.jpg"
        ]
        //1、找到span标签并且发生事件
        var span = document.getElementById("wrapper").getElementsByTagName("span"); // 元素集合
        var ul = document.getElementById("wrapper").getElementsByTagName("ul")[0];
        var p = document.getElementById("wrapper").getElementsByTagName("p")[0];
        //7、最终要实现鼠标移入，图片停止运动，移出继续
        var wrapper = document.getElementById("wrapper");
        //6、循环数组来给ul添加li，有多少数据就有多少个li
        var str1 = "";
        var str2 = "";
        for(var i = 0;i<arr.length;i++){
            str1+="<li><img src=\""+arr[i]+"\"/></li>";
            str2+="<span>"+(i+1)+"</span>";
        }
        ul.innerHTML = str1+"<li><img src=\"image/1.jpg\"/></li>";
        p.innerHTML = str2;
        //由于span标签在76行刚刚渲染到页面上，所以添加className必须在其后面操作
        span[0].className = "active";
        //4、建立一个模拟下标的变量
        var n = 0;
        //2、从集合中获取到每一个span标签
        for(var i = 0;i<span.length;i++){
            //自定义索引
            span[i].index = i;
            span[i].onclick = function(){
                 for(var j = 0;j<span.length;j++){
                     span[j].className = "";
                 }
                 //点谁  this ，谁变颜色???  className
                 this.className = "active";
                 //调用匀速运动的封装函数
                 move(ul,"left",40,-960*this.index);
            }
        }
        //3、自动跑起来 --  定时器 -- 周期性
        var timer = setInterval(autoNext,4000);
        function autoNext(){
            n++;
            if(n==arr.length+1){
                n = 1; //定位到第二张
                //直接定位到ul位置为0
                ul.style.left = "0px"; 
            }
            for(var j = 0;j<span.length;j++){
                     span[j].className = "";
            }
            span[n==arr.length?0:n].className = "active";
            move(ul,"left",40,-960*n);
        }
 
        //8、鼠标移入移出
        wrapper.onmouseover = function(){
            //清除定时器
            clearInterval(timer);
        }
        wrapper.onmouseout = function(){
            //重新设置定时器 -- 重新赋值
            timer = setInterval(autoNext,4000);
        }
    </script>
</body>
</html>